
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" id="aside">
        <div class="title">
          <span>IWu招聘后台管理</span>
        </div>
        <el-menu active-text-color="#409EFF" background-color="#545c64" class="el-menu-vertical-demo"
          default-active="home" text-color="#fff">
          <el-menu-item index="home" @click="showHome()">
            <el-icon>
              <HomeFilled />
            </el-icon>
            <span>主页</span>
          </el-menu-item>
          <el-sub-menu index="enterprisemanage">
            <template #title>
              <el-icon>
                <OfficeBuilding />
              </el-icon>
              <span>企业管理</span>
            </template>
            <el-menu-item index="alle" @click="showAllE()">所有公司</el-menu-item>
            <el-menu-item index="allhr" @click="showAllHR()">所有人事</el-menu-item>
            <el-menu-item index="" route="" @click="dialogFormVisible = true">公司入驻</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="usermanage">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="alluser" @click="showAllUser()">所有用户</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="jobmanage">
            <template #title>
              <el-icon>
                <Management />
              </el-icon>
              <span>岗位管理</span>
            </template>
            <el-menu-item index="alljob" @click="showAllJob()">所有岗位</el-menu-item>

          </el-sub-menu>
          <el-sub-menu index="auditmanage">
            <template #title>
              <el-icon>
                <Stamp />
              </el-icon>
              <span>审核管理</span>
            </template>
            <el-menu-item index="auditjob" @click="showAllAuditE()">公司审核</el-menu-item>
            <el-menu-item index="auditenterprise" @click="showAllAuditJob()">岗位审核</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="statisticalchart" @click="showStatisticalChart()">
            <el-icon>
              <Histogram />
            </el-icon>
            <span>统计分析</span>
          </el-menu-item>
        </el-menu>

      </el-aside>
      <el-container>
        <el-header id="head">
          <AdminHeader />
        </el-header>
        <el-main id="main">
          <Home v-if="isShowHome" />
          <AllE v-if="isShowAllE" />
          <AllHR v-if="isShowAllHR" />
          <AllUser v-if="isShowAllUser" />
          <AllJob v-if="isShowAllJob" />
          <AuditEnterprise v-if="isShowAllAuditE" />
          <AuditJobs v-if="isShowAllAuditJob" />
          <StatisticalChart v-if="isShowStatisticalShart" />
        </el-main>
        <el-footer id="foot">
          <div class="foot-p">
            欢迎你！Welcome You!
          </div>

        </el-footer>
      </el-container>
    </el-container>
    <el-dialog v-model="dialogFormVisible" title="公司入驻">
      <el-form :model="addEnterprise" ref="eForm" :rules="addEnterpriseRules">
        <el-form-item label="公司名称" prop="businessName">
          <el-input v-model="addEnterprise.businessName" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="公司性质" prop="eNature">
          <el-select v-model="addEnterprise.eNature" placeholder="请选择" style="width: 300px;">
            <el-option label="国有企业" value="国有企业" />
            <el-option label="集体企业" value="集体企业" />
            <el-option label="私营企业" value="私营企业" />
          </el-select>
        </el-form-item>
        <el-form-item label="公司规模" prop="businessName" style="margin-top: 10px;">

          <el-select v-model="addEnterprise.eSizeMin" clearable style="margin-right: 15px; width: 125px;"
            placeholder="请选择">
            <el-option v-for="item in sizeMins" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <span
            style="font-size: 25px;width: 20px;display: flex;align-items: center;justify-content: center;align-content: center;">
            -
          </span>
          <el-select v-model="addEnterprise.eSizeMax" clearable style="margin-left: 15px; width: 125px;"
            placeholder="请选择">
            <el-option v-for="item in sizeMaxs" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="经营行业" prop="eIndustry" style="margin-top: 10px;">
          <el-input v-model="addEnterprise.eIndustry" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="成立时间" prop="businessSetTime">
          <el-date-picker v-model="addEnterprise.businessSetTime" type="date" value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" label="请选择时间" placeholder="请选择时间" style="width: 300px" />
        </el-form-item>
        <el-form-item label="注册资金" prop="businessRegCapital" style="margin-top: 10px;">
          <el-input v-model="addEnterprise.businessRegCapital" style="width: 300px;" />
        </el-form-item>
        <el-form-item label="法人代表" prop="businessLegalRepresentative" style="margin-top: 10px;">
          <el-input v-model="addEnterprise.businessLegalRepresentative" style="width: 300px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel(eForm)">取消</el-button>
          <el-button type="primary" @click="handleConfirm(eForm)">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script lang='ts' setup>
import { addEnterprise, addEnterpriseRules } from "@/utills/adminValidators"
import { sizeMins, sizeMaxs } from "@/utills/data"
import { elmessage, data } from "@/hook/hook"
import { adminAddEnterprise } from "@/api/adminApi"
import type { FormInstance, FormRules } from 'element-plus'
import { HomeFilled, OfficeBuilding, UserFilled, Management, Stamp, Histogram } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import AdminHeader from "@/components/HeaderS.vue";
import AllE from "@/components/admin/AllE.vue";
import AllHR from "@/components/admin/AllHR.vue";
import AllUser from "@/components/admin/AllUser.vue";
import AllJob from "@/components/admin/AllJob.vue";
import Home from "@/components/admin/Home.vue";
import AuditEnterprise from "@/components/admin/AuditEnterprise.vue";
import AuditJobs from "@/components/admin/AuditJobs.vue";
import StatisticalChart from "@/components/admin/AdminStatisticalChart.vue";

import { ref, onMounted, reactive, getCurrentInstance } from "vue"
import { useStore } from "vuex"

const eForm = ref<FormInstance>()
const store = useStore()
const index = ref()
const dialogFormVisible = ref(false)
const route = useRoute()
const router = useRouter()

// @ts-ignore
const { proxy } = getCurrentInstance() // 1.获取proxy实例
// 控件
const isShowHome = ref(true)
const isShowAllE = ref(false)
const isShowAllHR = ref(false)
const isShowAllUser = ref(false)
const isShowAllJob = ref(false)
const isShowAllAuditE = ref(false)
const isShowAllAuditJob = ref(false)
const isShowStatisticalShart = ref(false)


const showHome = () => {
  isShowHome.value = true
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}
const showAllE = () => {
  isShowHome.value = false
  isShowAllE.value = true
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}
const showAllHR = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = true
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}
const showAllUser = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = true
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}
const showAllJob = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = true
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}
const showAllAuditE = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = true
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = false

}

const showAllAuditJob = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = true
  isShowStatisticalShart.value = false

}

const showStatisticalChart = () => {
  isShowHome.value = false
  isShowAllE.value = false
  isShowAllHR.value = false
  isShowAllUser.value = false
  isShowAllJob.value = false
  isShowAllAuditE.value = false
  isShowAllAuditJob.value = false
  isShowStatisticalShart.value = true

}
const handleCancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}
// 提交
const handleConfirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid: any, fields) => {

    if (valid) {


      const newData = {
        ...data(),
        ...addEnterprise
      }

      adminAddEnterprise(newData).then((res: any) => {
        if (res.data["code"] == "200") {
          dialogFormVisible.value = false
          elmessage(res.data["message"], res.data["type"])
        }
        else if (res.data["code"] == "301") {
          elmessage(res.data["message"], res.data["type"])

        }
        else if (res.data["code"] == "300") {
          dialogFormVisible.value = false
          elmessage(res.data["message"], res.data["type"])
          setTimeout(() => {
            router.replace("/admin")
          }, 500);
          localStorage.clear()
        }
        else {
          dialogFormVisible.value = false
          console.log(res.data["message"]);


        }
      })
      formEl.resetFields()
    } else {
      console.log('error submit!', fields)
    }
  })


  // store.commit("addNewE",newEForm)

  // console.log(store.state.eState.Es);



}
onMounted(() => {

})

</script>
<style scoped>
.title {
  display: inline-flex;
  height: 60px;
  width: 200px;
  font-size: 22px;
  color: #FFF;
  align-items: center;
  justify-content: center;
  background-color: #3f4348;
}

.el-menu-vertical-demo {
  height: 100vh;
  border: 0;
}


#aside {
  background-color: #545c64;
  /* height: 100vh; */
  /* height: 1200px; */
}

#head {

  display: flex;
  align-items: center;
  background-color: #FFF;
  justify-content: flex-end;
  padding-right: 100px;
  /* height: calc(60px - 5px); */
  box-shadow: 0px 1px 2px rgba(213, 208, 213, 3);
  z-index: 11;

}

#main {
  /* height: 1200px; */
  background-color: rgb(240, 240, 240);
  min-width: 920px;
}

.foot-p {
  width: 100%;
  height: 100%;
  min-width: 920px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#foot {
  background-color: #FFF;
  color: rgb(75, 76, 77);
}

.common-layout {
  font-family: '微软雅黑';
}
</style>